<template>
  <div>
    <div>element-plus</div>
    <div>
      <el-row class="mb-4">
        <el-button type="primary">primary</el-button>
        <el-button type="success">success</el-button>
        <el-button type="info">info</el-button>
        <el-button type="warning">warning</el-button>
        <el-button type="danger">danger</el-button>
      </el-row>
      <el-row class="mb-4">
        <el-button type="primary" plain>primary</el-button>
        <el-button type="success" plain>success</el-button>
        <el-button type="info" plain>info</el-button>
        <el-button type="warning" plain>warning</el-button>
        <el-button type="danger" plain>danger</el-button>
      </el-row>
      <el-row class="mb-4">
        <el-button type="primary" round>primary</el-button>
        <el-button type="success" round>success</el-button>
        <el-button type="info" round>info</el-button>
        <el-button type="warning" round>warning</el-button>
        <el-button type="danger" round>danger</el-button>
      </el-row>
      <el-row class="mb-4">
        <el-button type="primary" round disabled>primary</el-button>
        <el-button type="success" link>success</el-button>
        <el-button type="info" circle>info</el-button>
        <el-button type="warning" disabled>warning</el-button>
        <el-button type="danger" disabled>danger</el-button>
      </el-row>
    </div>
    <div>
      <el-table stripe="true" border="true" :data="tableData">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
      </el-table>
    </div>
    <div>
      <el-pagination background layout="prev, pager, next" :page-size="10" :total="100" />
    </div>
    <div>
      <el-alert title="这是一条信息提示" type="info" show-icon />
      <el-alert title="这是一条成功提示" type="success" show-icon />
      <el-alert title="这是一条警告提示" type="warning" show-icon />
      <el-alert title="这是一条错误提示" type="error" show-icon />
    </div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item to="/element-plus">组件</el-breadcrumb-item>
        <el-breadcrumb-item>导航</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-card class="box-card" style="width: 300px">
        <template v-slot:header>
          <div class="clearfix">
            <span>卡片标题</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
        </template>
        <div>卡片内容</div>
      </el-card>
    </div>
    <div>
      <el-tabs>
        <el-tab-pane label="用户管理">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务">定时任务</el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <el-form label-width="80px" inline :model="formModel">
        <el-form-item label="用户名">
          <el-input v-model="formModel.username" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formModel.address" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formModel.age" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      {{ formModel }}
    </div>
    <div>
      <el-divider>分割线</el-divider>
      <el-tag type="primary">标签一</el-tag>
      <el-tag type="success">标签二</el-tag>
      <el-tag type="info">标签三</el-tag>
    </div>
    <div>
      <el-tree
        :data="[
          {
            label: '一级 1',
            children: [
              {
                label: '二级 1-1',
                children: [{ label: '三级 1-1-1' }, { label: '三级 1-1-2' }],
              },
            ],
          },
          {
            label: '一级 2',
            children: [
              {
                label: '二级 2-1',
                children: [{ label: '三级 2-1-1' }, { label: '三级 2-1-2' }],
              },
              {
                label: '二级 2-2',
                children: [{ label: '三级 2-2-1' }, { label: '三级 2-2-2' }],
              },
            ],
          },
          {
            label: '一级 3',
            children: [
              {
                label: '二级 3-1',
                children: [{ label: '三级 3-1-1' }, { label: '三级 3-1-2' }],
              },
              {
                label: '二级 3-2',
                children: [{ label: '三级 3-2-1' }, { label: '三级 3-2-2' }],
              },
            ],
          },
        ]"
        :props="{ children: 'children', label: 'label' }"
        accordion
        default-expand-all
      />
    </div>
    <div>
      <el-collapse>
        <el-collapse-item title="一致性 Consistency" name="1">
          <div>文本内容 A</div>
        </el-collapse-item>
        <el-collapse-item title="反馈 Feedback" name="2">
          <div>文本内容 B</div>
        </el-collapse-item>
        <el-collapse-item title="效率 Efficiency" name="3">
          <div>文本内容 C</div>
        </el-collapse-item>
        <el-collapse-item title="可控 Controllability" name="4">
          <div>文本内容 D</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div>
      <el-slider v-model="formModel.age" />
      {{ formModel.age }}
    </div>
    <div>
      <el-switch v-model="formModel.isGoodMan" active-text="开" inactive-text="关" />
      {{ formModel.isGoodMan }}
    </div>
    <div>
      <!-- menu -->
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-sub-menu index="1">
          <template v-slot:title>导航一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
          <el-sub-menu index="1-3">
            <template v-slot:title>选项3</template>
            <el-menu-item index="1-3-1">选项3-1</el-menu-item>
            <el-menu-item index="1-3-2">选项3-2</el-menu-item>
            <el-menu-item index="1-3-3">选项3-3</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template v-slot:title>导航二</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-sub-menu index="2-3">
            <template v-slot:title>选项3</template>
            <el-menu-item index="2-3-1">选项3-1</el-menu-item>
            <el-menu-item index="2-3-2">选项3-2</el-menu-item>
            <el-menu-item index="2-3-3">选项3-3</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template v-slot:title>导航三</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
          <el-sub-menu index="3-3">
            <template v-slot:title>选项3</template>
            <el-menu-item index="3-3-1">选项3-1</el-menu-item>
            <el-menu-item index="3-3-2">选项3-2</el-menu-item>
            <el-menu-item index="3-3-3">选项3-3</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const tableData = [
  {
    date: '2016-05-02',
    name: '王小明',
    address: '北京市朝阳区芍药居',
  },
  {
    date: '2016-05-04',
    name: '王小明',
    address: '北京市朝阳区芍药居',
  },
  {
    date: '2016-05-01',
    name: '王小明',
    address: '北京市朝阳区芍药居',
  },
  {
    date: '2016-05-03',
    name: '王小明',
    address: '北京市朝阳区芍药居',
  },
]
const formModel = reactive({
  username: '张三',
  address: '北京市朝阳区芍药居',
  age: 18,
  isGoodMan: true,
})
</script>

<style scoped></style>
